<template>
    <h1>筛选商品</h1>
    <h5>商品总数量：{{ list.length }}</h5>
    <div class="mt-4">
        <el-input v-model="query.search" placeholder="请您输入关键词" class="input-with-select">
            <template #prepend>
                <el-select clearable v-model="query.category" placeholder="类型" style="width: 115px">
                    <el-option v-for="item in categorys" :key="item" :label="item" :value="item" />
                </el-select>
            </template>
            <template #append>
                <el-button :icon="Search" @click="searchFn" />
            </template>
        </el-input>
    </div>
    <el-table :data="list" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="proid" label="编号" width="180" />
        <el-table-column label="图片" width="180">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="180" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="originprice" label="价格" width="100" />
        <el-table-column prop="discount" label="折扣" width="100" />
        <el-table-column prop="sales" label="销量" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
        <el-table-column label="是否推荐" v-if="crud.charAt(5)==='1'">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0" class="ml-2"
                    @change="(val: number) => updateisrecommend(scope.row.proid, val)" />
            </template>
        </el-table-column>
        <el-table-column label="是否秒杀" v-if="crud.charAt(6)==='1'">
            <template #default="scope">
                <el-switch v-model="scope.row.isseckill" :active-value="1" :inactive-value="0" class="ml-2"
                    @change="(val: number) => updateisseckill(scope.row.proid, val)" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { admin_pro_getCategory, admin_pro_searchPro, admin_pro_updateFlag } from "../../../utils/api";
import { ElNotification } from 'element-plus'
import "element-plus/es/components/notification/style/css"
import {useRoute} from "vue-router";
const $router = useRoute();
const crud:string = ($router.meta.crud as string);
// 一、分类
// 定义了分类的数据
const categorys = reactive<string[]>([])
// 获取商品的分类
const getCategorys = () => {
    admin_pro_getCategory({}).then((res: any) => {
        if (res.data.code = 200) {
            categorys.length = 0;
            categorys.push(...res.data.data)
        }
    })
}
getCategorys()
// 定义查询条件
const query = reactive<{
    category?: string,
    search?: string
}>({
    category: "",
    search: ""
})
// 定义查询的结果（表格里的数据）
interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number,
    flag: number;
}
// 定义了数据的保存
const list = reactive<IGoods[]>([]);
const searchFn = () => {
    admin_pro_searchPro(
        {
            category: query.category,
            search: query.search
        }
    ).then((res) => {
        if (res.data.code == 200) {
            list.length = 0
            query.search = ""
            list.push(...res.data.data)
        }
    })
}
searchFn()
// 更新商品推荐状态
const updateisrecommend = (proid: string, val: number) => {
    admin_pro_updateFlag({
        proid: proid,
        type: "isrecommend",
        flag: val
    }).then((res: any) => {
        if (res.data.code === "200") {
            if (val == 1) {
                ElNotification({
                    title: "提示",
                    message: "推荐成功",
                    type: "success",
                })
            } else {
                ElNotification({
                    title: "提示",
                    message: "取消推荐",
                    type: "success",
                })
            }
        }
    })
}
// 更新商品秒杀状态
const updateisseckill = (proid: string, val: number) => {
    admin_pro_updateFlag({
        proid: proid,
        type: "isseckill",
        flag: val
    }).then((res: any) => {
        if (res.data.code === "200") {
            if (val == 1) {
                ElNotification({
                    title: "提示",
                    message: "更新秒杀成功",
                    type: "success",
                })
            } else {
                ElNotification({
                    title: "提示",
                    message: "取消秒杀",
                    type: "success",
                })
            }
        }
    })
}

</script>

<style scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.img {
    width: 50%;
    height: 50%;
}
</style>